<template>
  <div id="app">
    <!-- 头部导航 -->
    <!-- <el-row :gutter="20" class="border-top">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="18" align='middle' class="view-center">
        <el-row type="flex" align="middle">
      <div><img src="./assets/logo.png" alt="" height="30px" /></div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <router-link to="/">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/agent">房产经纪</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/category">地产分类</router-link>
        </el-menu-item>

        <el-menu-item index="4">
          <router-link to="/about">关于我们</router-link>
        </el-menu-item>
      </el-menu>
    </el-row>
      </el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  </el-row>  -->
    <!-- <el-divider></el-divider> -->
    <!-- <nav-bar></nav-bar> -->
    <TopBar :show="show"></TopBar>
    <router-view></router-view>
  </div>
</template>
<script>
import NavBar from '@/components/navBar.vue'
import TopBar from './components/topBar.vue'
import { getPages } from '@/api/page'
import router from '@/router/index'
import { resetRouter } from './router/index'
export default {
  components: { NavBar, TopBar },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      showMy: false, //显示另一个导航栏

      show: false,
      // 数据长度
      length: 0
    }
  },
  created() {
    this.getPages()
  },
  methods: {
    // handleSelect(key, keyPath) {
    //   // console.log(key, keyPath)
    // }

    async getPages() {
      const res = await getPages()
      this.length = res.data.length
      this.show = res.data.length > 0 ? true : false
      console.log(this.$router.options.routes)

      if (this.show) {
        console.log('有页面，添加路由')
        router.addRoutes([
          { path: '/about', component: () => import('./views/about/index.vue') },
          { path: '*', redirect: '/404' }
        ])
      } else {
        resetRouter()
        console.log('没有页面，重置为静态路由')
      }

      // 路由守卫
      // router.beforeEach(async (to, from, next) => {
      //   // 有页面，添加路由
      //   if (this.show) {
      //     console.log(87, '有页面，添加路由')
      //     router.addRoutes([
      //       { path: '/about', component: () => import('./views/about/index.vue') },
      //       { path: '*', redirect: '/404' }
      //     ])
      //     // 放行
      //     next(to.path)
      //   } else {
      //     // '没有页面，重置为静态路由'
      //     resetRouter()
      //     // 放行
      //     next()
      //     console.log(99, '没有页面，重置为静态路由')
      //   }
      // })
    }
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
.el-menu-demo {
  background-color: rgba(0, 0, 0, 0);
}
.el-menu--horizontal > .el-menu-item {
  color: #fff;
}
.el-menu.el-menu--horizontal {
  text-decoration: none;
  border: none;
}
.router-link-active {
  text-decoration: none;
}

.el-row {
  align-items: center;
  div {
    padding-left: 100px;
    padding-right: 100px;
    text-align: center;
  }
}
.app {
  display: flex;
  justify-content: center;
}
.grid-content {
  min-height: 36px;
  .el-menu--horizontal > .el-menu-item {
    color: #fff;
  }
}
.el-menu.el-menu--horizontal {
  text-decoration: none;
  border: none;
}
</style>
